<template>
  <div>
    <div class="search-bar">
      <van-row>
        <van-col :span="3">
          <img
            :src="locationIcon"
            width="70%"
            class="location-icon"
          >
        </van-col>
        <van-col :span="16">
          <input
            type="text"
            class="search-input"
          >
        </van-col>
        <van-col :span="5">
          <van-button size="mini">查找</van-button>
        </van-col>
      </van-row>
    </div>
    <!-- swiper area -->
    <div class="swiper-area">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          v-for="(item, index) in bannerPicArray"
          :key="index"
        >
          <img
            :src="item.image"
            width="100%"
          >
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- type-bar -->
    <div class="type-bar">
      <div
        v-for="(cate, index) in category"
        :key="index"
        class="type-bar-item"
      >
        <img
          :src="cate.image"
          width="90%"
        >
        <span>{{ cate.mallCategoryName }}</span>
      </div>
    </div>
    <!-- adbanner -->
    <div>
      <img
        :src="adbanner.PICTURE_ADDRESS"
        width="100%"
      >
    </div>
    <!--Recommend goods area-->
    <div class="recommend-area">
      <div class="recommend-title">
        商品推荐
      </div>
      <div class="recommend-body">
        <swiper :options="swiperOptions">
          <swiper-slide
            v-for="(item, index) in recommends"
            :key="index"
          >
            <div class="recommend-item">
              <img
                :src="item.image"
                width="80%"
              >
              <div>{{ item.goodsName }}</div>
              <div>￥{{ item.price | moneyFilter }} ￥{{ item.mallPrice | moneyFilter }}</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- floor -->
    <floorComponent
      :floorData="floor1"
      :floorTitle="floorName.floor1"
    ></floorComponent>
    <floorComponent
      :floorData="floor2"
      :floorTitle="floorName.floor2"
    ></floorComponent>
    <floorComponent
      :floorData="floor3"
      :floorTitle="floorName.floor3"
    ></floorComponent>
    <!--Hot Area-->
    <div class="hot-area">
      <div class="hot-title">热卖商品</div>
      <div class="hot-goods">
        <!--这里需要一个list组件-->
        <van-row gutter="20">
          <van-col
            span="12"
            v-for="(item,index) in hotGoods"
            :key="index"
          >
            <!-- <div>{{item.name}}</div> -->
            <goods-info
              :goodsImage="item.image"
              :goodsName="item.name"
              :goodsPrice="item.price"
              :goodsId="item.goodsId"
            ></goods-info>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import url from '../../serviceApi.config'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import FloorComponent from '../component/FloorComponent'
import goodsInfo from '../component/GoodsInfoComponent'
import { toMoney } from '../../filter/moneyFilter'
import 'swiper/css/swiper.css'
export default {
  data() {
    return {
      locationIcon: require('../../assets/images/location.png'),
      bannerPicArray: [
        // { imageUrl: 'https://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg' },
        // { imageUrl: 'https://imgs.qunarzz.com/vc/e3/a1/71/f498dfd3bed948d623c9093252.jpg_92.jpg' }
      ],
      category: [],
      adbanner: {},
      recommends: [],
      swiperOptions: {
        slidesPerView: 3
      },
      floor1: [],
      floor2: [],
      floor3: [],
      floorName: {},
      hotGoods: []
    }
  },
  filters: {
    moneyFilter(money) {
      return toMoney(money)
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    FloorComponent,
    goodsInfo
  },
  created() {
    this.getDataList()
  },
  methods: {
    async getDataList() {
      const { data: res } = await this.$http.get(url.getShoppingMailInfo)
      // console.log(res)
      this.category = res.data.category
      this.bannerPicArray = res.data.slides
      this.adbanner = res.data.advertesPicture
      this.recommends = res.data.recommend
      this.floor1 = res.data.floor1
      this.floor2 = res.data.floor2
      this.floor3 = res.data.floor3
      this.floorName = res.data.floorName
      this.hotGoods = res.data.hotGoods
    }
  }
}
</script>

<style scoped>
.search-bar {
  height: 2.2rem;
  background-color: #e5017d;
  line-height: 2.2rem;
  overflow: hidden;
}
.search-input {
  width: 100%;
  height: 1.3rem;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid 1px !important ;
  background-color: #e5017d;
  color: #fff;
}
.location-icon {
  padding-top: 0.2rem;
  padding-left: 0.3rem;
}
.swiper-area {
  width: 20rem;
  clear: both;
  /* height: 15rem; */
}
.type-bar {
  background-color: #fff;
  margin: 0 0.3rem 0.3rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.type-bar-item {
  padding: 0.3rem;
  font-size: 12px;
  text-align: center;
  flex: 1;
}
.recommend-area {
  background-color: #fff;
  margin-top: 0.3rem;
}
.recommend-title {
  border-bottom: 1px solid #eee;
  font-size: 14px;
  padding: 0.2rem;
  color: #e5017d;
}
.recommend-body {
  border-bottom: 1px solid #eee;
}

.recommend-item {
  width: 99%;
  border-right: 1px solid #eee;
  font-size: 12px;
  text-align: center;
}
.floor-anomaly {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.floor-anomaly div {
  width: 10rem;

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.floor-one {
  border-right: 1px solid #ddd;
}
.floor-two {
  border-bottom: 1px solid #ddd;
}
.hot-area {
  text-align: center;
  font-size: 14px;
  height: 1.8rem;
  line-height: 1.8rem;
}
.hot-goods {
  height: 130rem;
  overflow: hidden;
  background-color: #fff;
}
</style>